<template>
  <div class="statisticDialogContainer">
    <el-dialog
      :title="title"
      style="z-index: 2000"
      :modal="false"
      :visible.sync="isUserEquipShowPop"
      @close="closeDialog"
    >
      <div class="dialogItem" v-for="(item, index) in tableLabelGroup">
        <div class="header">
          <span>{{ item.header }}</span>
        </div>
        <div class="content">
          <div
            class="contentItem"
            :class="data.prop"
            v-for="(data, index) in item.content"
          >
            <span>{{ data.label }}&nbsp;</span>
            <el-input
              size="small"
              v-model="data.data"
              clearable
              v-if="data.prop !== 'mark'"
              disabled
            ></el-input>
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 3, maxRows: 5 }"
              v-model="data.data"
              disabled
              clearable
              v-else
            ></el-input>
          </div>
        </div>
      </div>
      <div class="downloadExcel">
        <div class="header">
          <span>附件下载</span>
        </div>
        <div class="content">
          <img
            @click="downloadExcel"
            src="../../../assets/excel下载.png"
            alt=""
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloadExcel } from "@/api/EquipmentManagement";

export default {
  name: "equipStatistic",
  props: {
    // dialogVisible: {
    //   type: Boolean,
    //   required: true,
    // },
  },
  components: {},
  data() {
    return {
      tableLabelGroup: [
        {
          header: "管网属性表信息",
          content: [
            { label: "关键字", prop: "deviceCode", data: "" },
            { label: "管线编号", prop: "deviceCode", data: "" },
            { label: "图形有效", prop: "deviceCode", data: "" },
            { label: "工程编号", prop: "deviceCode", data: "" },
            { label: "所在道路", prop: "deviceCode", data: "" },
            { label: "平均埋深", prop: "deviceCode", data: "" },
            { label: "管网长度", prop: "deviceCode", data: "" },
            { label: "埋设日期", prop: "deviceCode", data: "" },
            { label: "管网用途", prop: "deviceCode", data: "" },
            { label: "所属公司", prop: "deviceCode", data: "" },
            { label: "管网区块", prop: "deviceCode", data: "" },
            { label: "管网口径", prop: "deviceCode", data: "" },
            { label: "管网材质", prop: "deviceCode", data: "" },
            { label: "接口形式", prop: "deviceCode", data: "" },
            { label: "接口填料", prop: "deviceCode", data: "" },
            { label: "本点号", prop: "deviceCode", data: "" },
            { label: "上点号", prop: "deviceCode", data: "" },
            { label: "起点地面...", prop: "deviceCode", data: "" },
            { label: "终点地面...", prop: "deviceCode", data: "" },
            { label: "起点管顶...", prop: "deviceCode", data: "" },
            { label: "终点管顶...", prop: "deviceCode", data: "" },
            { label: "起点埋深", prop: "deviceCode", data: "" },
            { label: "终点埋深", prop: "deviceCode", data: "" },
            { label: "管理单位", prop: "deviceCode", data: "" },
            { label: "所属区县", prop: "deviceCode", data: "" },
            { label: "备注", prop: "deviceCode", data: "" },
            { label: "录入人员", prop: "deviceCode", data: "" },
            { label: "录入时间", prop: "deviceCode", data: "" },
            { label: "风险评估", prop: "deviceCode", data: "" },
            { label: "影响程度", prop: "deviceCode", data: "" },
            { label: "风险可能...", prop: "deviceCode", data: "" },

            { label: "影响程度等级", prop: "deviceCode", data: "" },
            { label: "资料来源", prop: "deviceCode", data: "" },
            { label: "竣工图编号", prop: "deviceCode", data: "" },
            { label: "施工单位", prop: "deviceCode", data: "" },
            { label: "竣工日期", prop: "deviceCode", data: "" },
            { label: "工程关键字", prop: "deviceCode", data: "" },
            { label: "一级分区", prop: "deviceCode", data: "" },
            { label: "二级分区", prop: "deviceCode", data: "" },
            { label: "更新时间", prop: "deviceCode", data: "" },
            { label: "更新人员", prop: "deviceCode", data: "" },
            { label: "废弃状态", prop: "deviceCode", data: "" },
            { label: "所属环线", prop: "deviceCode", data: "" },
            { label: "工程名称", prop: "deviceCode", data: "" },
            { label: "记录修改人", prop: "deviceCode", data: "" },
            { label: "记录修改...", prop: "deviceCode", data: "" },
            { label: "管线品牌", prop: "deviceCode", data: "" },
            { label: "管线类型", prop: "deviceCode", data: "" },
            { label: "管道属性", prop: "deviceCode", data: "" },
            { label: "是否进泵...", prop: "deviceCode", data: "" },
            { label: "是否管廊...", prop: "deviceCode", data: "" },
            { label: "是否增压...", prop: "deviceCode", data: "" },
          ],
        },
        // {
        //   header: "系统信息",
        //   content: [
        //     { label: "管线编号", prop: "deviceCode", data: "" },
        //     { label: "工程编号", prop: "deviceCode", data: "" },
        //     { label: "平均埋深", prop: "deviceCode", data: "" },
        //     { label: "所在道路", prop: "deviceCode", data: "" },
        //     { label: "管网长度", prop: "deviceCode", data: "" },
        //     { label: "埋设日期", prop: "deviceCode", data: "" },
        //     { label: "所属公司", prop: "deviceCode", data: "" },
        //     { label: "管网区块", prop: "deviceCode", data: "" },
        //     { label: "竣工图编号", prop: "deviceCode", data: "" },
        //     { label: "施工单位", prop: "deviceCode", data: "" },
        //     { label: "竣工日期", prop: "deviceCode", data: "" },
        //     { label: "所属环线", prop: "deviceCode", data: "" },
        //     { label: "工程名称", prop: "deviceCode", data: "" },
        //     { label: "管线品牌", prop: "deviceCode", data: "" },
        //     { label: "管线类型", prop: "deviceCode", data: "" },
        //     { label: "管道属性", prop: "deviceCode", data: "" },
        //     { label: "是否进泵房管线", prop: "deviceCode", data: "" },
        //     { label: "是否增压管线", prop: "deviceCode", data: "" },
        //     { label: "是否管廊管线", prop: "deviceCode", data: "" },
        //   ],
        // },
        // {
        //   header: "管线参数",
        //   content: [
        //     { label: "管线编号", prop: "deviceCode", data: "" },
        //     { label: "工程编号", prop: "deviceCode", data: "" },
        //     { label: "平均埋深", prop: "deviceCode", data: "" },
        //     { label: "所在道路", prop: "deviceCode", data: "" },
        //     { label: "管网长度", prop: "deviceCode", data: "" },
        //     { label: "埋设日期", prop: "deviceCode", data: "" },
        //     { label: "所属公司", prop: "deviceCode", data: "" },
        //     { label: "管网区块", prop: "deviceCode", data: "" },
        //     { label: "竣工图编号", prop: "deviceCode", data: "" },
        //     { label: "施工单位", prop: "deviceCode", data: "" },
        //     { label: "竣工日期", prop: "deviceCode", data: "" },
        //     { label: "所属环线", prop: "deviceCode", data: "" },
        //     { label: "工程名称", prop: "deviceCode", data: "" },
        //     { label: "管线品牌", prop: "deviceCode", data: "" },
        //     { label: "管线类型", prop: "deviceCode", data: "" },
        //     { label: "管道属性", prop: "deviceCode", data: "" },
        //     { label: "是否进泵房管线", prop: "deviceCode", data: "" },
        //     { label: "是否增压管线", prop: "deviceCode", data: "" },
        //     { label: "是否管廊管线", prop: "deviceCode", data: "" },
        //   ],
        // },
        // {
        //   header: "物探信息",
        //   content: [
        //     { label: "管线编号", prop: "deviceCode", data: "" },
        //     { label: "工程编号", prop: "deviceCode", data: "" },
        //     { label: "平均埋深", prop: "deviceCode", data: "" },
        //     { label: "所在道路", prop: "deviceCode", data: "" },
        //     { label: "管网长度", prop: "deviceCode", data: "" },
        //     { label: "埋设日期", prop: "deviceCode", data: "" },
        //     { label: "所属公司", prop: "deviceCode", data: "" },
        //     { label: "管网区块", prop: "deviceCode", data: "" },
        //     { label: "竣工图编号", prop: "deviceCode", data: "" },
        //     { label: "施工单位", prop: "deviceCode", data: "" },
        //     { label: "竣工日期", prop: "deviceCode", data: "" },
        //     { label: "所属环线", prop: "deviceCode", data: "" },
        //     { label: "工程名称", prop: "deviceCode", data: "" },
        //     { label: "管线品牌", prop: "deviceCode", data: "" },
        //     { label: "管线类型", prop: "deviceCode", data: "" },
        //     { label: "管道属性", prop: "deviceCode", data: "" },
        //     { label: "是否进泵房管线", prop: "deviceCode", data: "" },
        //     { label: "是否增压管线", prop: "deviceCode", data: "" },
        //     { label: "是否管廊管线", prop: "deviceCode", data: "" },
        //   ],
        // },
        // {
        //   header: "其他信息",
        //   content: [
        //     { label: "管线编号", prop: "deviceCode", data: "" },
        //     { label: "工程编号", prop: "deviceCode", data: "" },
        //     { label: "平均埋深", prop: "deviceCode", data: "" },
        //     { label: "所在道路", prop: "deviceCode", data: "" },
        //     { label: "管网长度", prop: "deviceCode", data: "" },
        //     { label: "埋设日期", prop: "deviceCode", data: "" },
        //     { label: "所属公司", prop: "deviceCode", data: "" },
        //     { label: "管网区块", prop: "deviceCode", data: "" },
        //     { label: "竣工图编号", prop: "deviceCode", data: "" },
        //     { label: "施工单位", prop: "deviceCode", data: "" },
        //     { label: "竣工日期", prop: "deviceCode", data: "" },
        //     { label: "所属环线", prop: "deviceCode", data: "" },
        //     { label: "工程名称", prop: "deviceCode", data: "" },
        //     { label: "管线品牌", prop: "deviceCode", data: "" },
        //     { label: "备注", prop: "mark", data: "" },
        //     { label: "管道属性", prop: "deviceCode", data: "" },
        //     { label: "是否进泵房管线", prop: "deviceCode", data: "" },
        //     { label: "是否增压管线", prop: "deviceCode", data: "" },
        //     { label: "是否管廊管线", prop: "deviceCode", data: "" },
        //   ],
        // },
      ],
      pipeLineInfo: [
        { label: "关键字", prop: "keywords", data: "" },
        { label: "管线编号", prop: "deviceCode", data: "" },
        { label: "图形有效", prop: "deviceCode", data: "" },
        { label: "工程编号", prop: "projectNumber", data: "" },
        { label: "所在道路", prop: "roadName", data: "" },
        { label: "平均埋深", prop: "burialDepth", data: "" },
        { label: "管网长度", prop: "pipelineLength", data: "" },
        { label: "埋设日期", prop: "deviceCode", data: "" },
        { label: "管网用途", prop: "deviceCode", data: "" },
        { label: "所属公司", prop: "deviceCode", data: "" },
        { label: "管网区块", prop: "deviceCode", data: "" },
        { label: "管网口径", prop: "pipeDiameter", data: "" },
        { label: "管网材质", prop: "material", data: "" },
        { label: "接口形式", prop: "deviceCode", data: "" },
        { label: "接口填料", prop: "deviceCode", data: "" },
        { label: "本点号", prop: "pointNumber", data: "" },
        { label: "上点号", prop: "upstreamPointNumber", data: "" },
        { label: "起点地面...", prop: "deviceCode", data: "" },
        { label: "终点地面...", prop: "deviceCode", data: "" },
        { label: "起点管顶...", prop: "deviceCode", data: "" },
        { label: "终点管顶...", prop: "deviceCode", data: "" },
        { label: "起点埋深", prop: "deviceCode", data: "" },
        { label: "终点埋深", prop: "deviceCode", data: "" },
        { label: "管理单位", prop: "deviceCode", data: "" },
        { label: "所属区县", prop: "deviceCode", data: "" },
        { label: "备注", prop: "remarks", data: "" },
        { label: "录入人员", prop: "deviceCode", data: "" },
        { label: "录入时间", prop: "deviceCode", data: "" },
        { label: "风险评估", prop: "deviceCode", data: "" },
        { label: "影响程度", prop: "deviceCode", data: "" },
        { label: "风险可能...", prop: "deviceCode", data: "" },
        { label: "影响程度等级", prop: "deviceCode", data: "" },
        { label: "资料来源", prop: "deviceCode", data: "" },
        { label: "竣工图编号", prop: "completionDiagramNumber", data: "" },
        { label: "施工单位", prop: "constructionUnit", data: "" },
        { label: "竣工日期", prop: "completionDate", data: "" },
        { label: "工程关键字", prop: "deviceCode", data: "" },
        { label: "一级分区", prop: "deviceCode", data: "" },
        { label: "二级分区", prop: "deviceCode", data: "" },
        { label: "更新时间", prop: "deviceCode", data: "" },
        { label: "更新人员", prop: "deviceCode", data: "" },
        { label: "废弃状态", prop: "deviceCode", data: "" },
        { label: "所属环线", prop: "deviceCode", data: "" },
        { label: "工程名称", prop: "deviceCode", data: "" },
        { label: "记录修改人", prop: "deviceCode", data: "" },
        { label: "记录修改...", prop: "deviceCode", data: "" },
        { label: "管线品牌", prop: "pipelineBrand", data: "" },
        { label: "管线类型", prop: "deviceCode", data: "" },
        { label: "管道属性", prop: "deviceCode", data: "" },
        { label: "是否进泵...", prop: "deviceCode", data: "" },
        { label: "是否管廊...", prop: "deviceCode", data: "" },
        { label: "是否增压...", prop: "deviceCode", data: "" },
      ],
      deviceInfo: [
        { label: "关键字", prop: "keywords", data: "" },
        { label: "阀门编号", prop: "deviceCode", data: "" },
        { label: "数据来源", prop: "deviceCode", data: "" },
        { label: "图形有效", prop: "deviceCode", data: "" },
        { label: "工程编号", prop: "projectNumber", data: "" },
        { label: "所在道路", prop: "roadName", data: "" },
        { label: "埋设深度", prop: "burialDepth", data: "" },
        { label: "安装年限", prop: "deviceCode", data: "" },
        { label: "安装日期", prop: "deviceCode", data: "" },
        { label: "所属公司", prop: "deviceCode", data: "" },
        { label: "管网区块", prop: "deviceCode", data: "" },
        { label: "阀门口径", prop: "diameter", data: "" },
        { label: "阀门材质", prop: "accessoryMateria", data: "" },
        { label: "阀门式样", prop: "style", data: "" },
        { label: "阀门转向", prop: "deviceCode", data: "" },
        { label: "阀门转数", prop: "deviceCode", data: "" },
        { label: "阀门品牌", prop: "valveBrand", data: "" },
        { label: "阀门型号", prop: "deviceCode", data: "" },
        { label: "阀门功能", prop: "deviceCode", data: "" },
        { label: "密封方式", prop: "deviceCode", data: "" },
        { label: "横坐标", prop: "xCoordinate", data: "" },
        { label: "纵坐标", prop: "yCoordinate", data: "" },
        { label: "操作状态", prop: "deviceCode", data: "" },
        { label: "阀井深度", prop: "deviceCode", data: "" },
        { label: "阀井情况", prop: "deviceCode", data: "" },
        { label: "阀门状态", prop: "valveStatus", data: "" },
        { label: "地面高程", prop: "elevation", data: "" },
        { label: "井座情况", prop: "deviceCode", data: "" },
        { label: "管点高程", prop: "deviceCode", data: "" },
        { label: "阀门位置", prop: "deviceCode", data: "" },
        { label: "录入人员", prop: "deviceCode", data: "" },
        { label: "本点号", prop: "pointNumber", data: "" },
        { label: "管理单位", prop: "deviceCode", data: "" },
        { label: "录入时间", prop: "completionDiagramNumber", data: "" },
        { label: "所属区县", prop: "constructionUnit", data: "" },
        { label: "开关状态", prop: "completionDate", data: "" },
        { label: "目前状况", prop: "deviceCode", data: "" },
        { label: "备注", prop: "renarks", data: "" },
        { label: "设备类别", prop: "deviceCode", data: "" },
        { label: "节点类型", prop: "deviceCode", data: "" },
        { label: "路面类型", prop: "roadSurfaceType", data: "" },
        { label: "竣工图编号", prop: "completionDiagranNumber", data: "" },
        { label: "施工单位", prop: "constructionUnit", data: "" },
        { label: "竣工日期", prop: "completionDate", data: "" },
        { label: "一级分区", prop: "deviceCode", data: "" },
        { label: "二级分区", prop: "deviceCode", data: "" },
        { label: "更新时间", prop: "pipelineBrand", data: "" },
        { label: "更新人员", prop: "deviceCode", data: "" },
        { label: "废弃状态", prop: "deviceCode", data: "" },
        { label: "所属环线", prop: "deviceCode", data: "" },
        { label: "工程名称", prop: "deviceCode", data: "" },
        { label: "记录修改人", prop: "deviceCode", data: "" },
        { label: "记录修改...", prop: "deviceCode", data: "" },
        { label: "实际恢复...", prop: "deviceCode", data: "" },
      ],
      detailDataContent: {},
      title: "设备统计信息",
      dialogTableVisible: true,
    };
  },
  computed: {
    detailDataPopList() {
      return this.$store.state.detailDataPopList;
    },
    isUserEquipShowPop: {
      get() {
        return this.$store.state.isUserEquipShow;
      },
      set(newValue) {
        this.$store.commit("setIsUserEquipShow", newValue);
      },
    },
    // isStatisticDialogShow() {
    //   // 返回 prop 的值
    //   return this.dialogVisible;
    // },
    getGeom() {
      return this.$store.state.geom;
    },
  },
  watch: {
    detailDataPopList(newVal) {
      console.log(newVal, "newvAL");
      this.detailDataContent = {};
      newVal.rec.forEach((item) => {
        this.detailDataContent[item.fldname] = item.fldval;
      });
      console.log(this.detailDataContent, "detailDataContent");
      if (newVal.strCor) {
        //管线
        this.detailDataContent.typeOfDevice = "pipeline";
        this.tableLabelGroup[0].header = "管网属性表信息";
        this.tableLabelGroup[0].content = this.pipeLineInfo;
      } else if (newVal.strPnt) {
        //设备点
        this.detailDataContent.typeOfDevice = "device";
        this.tableLabelGroup[0].header = "设备属性表信息";
        this.tableLabelGroup[0].content = this.deviceInfo;
      }
      this.tableLabelGroup[0].content.forEach((item) => {
        for (let key in this.detailDataContent) {
          let keyAfterDeal = this.toCamelCase(key);
          // console.log(keyAfterDeal, "keyAfterDeal");
          if (item.prop == keyAfterDeal) {
            item.data = this.detailDataContent[key];
          }
        }
      });
    },

    getGeom(newVal) {
      this.geomData = newVal;
      this.areaMarkText = JSON.stringify(this.geomData.getCoordinates());
      // ) ,geomSum,'获取到的geom');
    },
    processData(newValue) {
      if (newValue == "未处理") {
        this.adviceTableData = this.UnProcessedAdviceTableData;
      } else if (newValue == "已处理") {
        this.adviceTableData = this.ProcessedAdviceTableData;
      }
    },
  },
  methods: {
    async downloadExcel() {
      //test
      await downloadExcel({ fileName: "426c4c45空间查询统计表 (5).xlsx" }).then(
        (res) => {
          const blob = new Blob([res.data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = "数据表格.xlsx";
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }
      );
    },
    toCamelCase(str) {
      return str.replace(/_([a-z])/g, function (match, group1) {
        return group1.toUpperCase();
      });
    },
    closeDialog() {
      this.$store.commit("setIsUserEquipShow", false);
      // 通过修改 prop 来关闭弹窗
      // this.$emit("update:dialogVisible", false);
    },

    openDialog() {
      this.dialogTableVisible = true;
    },
  },

  mounted() {
    // this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.dialogItem {
  .header {
    height: 30px;
    width: 100%;
    background-color: #4b8aa0;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    text-align: left;
    span {
      margin-left: 5px;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;

    .contentItem {
      display: flex;
      justify-content: flex-end;
      width: 33%;
      margin: 0.5rem 0;
      align-items: center;

      .el-input {
        width: 200px;
      }
    }
    .mark {
      width: 100%;
      justify-content: flex-start;
      margin: 0.5rem 4.2rem;
      .el-textarea {
        width: 31rem;
      }
    }
  }
}
.downloadExcel {
  .header {
    height: 30px;
    width: 100%;
    background-color: #4b8aa0;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    text-align: left;
    span {
      margin-left: 5px;
    }
  }
  .content {
    img {
      cursor: pointer;
      width: 8rem;
      height: 8rem;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 6px 6px 5px 1px rgba(0, 0, 0, 0.3);
      margin: 0.5rem;
    }
  }
}
::v-deep .el-dialog {
  margin-top: 0;
  position: relative;
  .el-dialog__body {
    height: 40rem;
    overflow-y: scroll;
  }
}
::v-deep .el-dialog__wrapper {
  position: relative;
}
::v-deep .el-checkbox {
  color: white;
}

.statisticDialogContainer {
  width: 120rem;
  /* height: 42vh; */
  position: absolute;
  top: -8rem;
  left: -85rem;

  .statisticDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;

    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }

    .bar {
      width: 5px;
      /* 小竖条的宽度 */
      height: 20px;
      /* 小竖条的高度 */
      background-color: white;
      /* 小竖条的颜色 */
      margin-right: 10px;
      /* 小竖条和文字之间的间距 */
    }

    .icon {
      width: 20px;
      /* 小方框的宽度 */
      height: 20px;
      /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px;
      /* 小方框之间的间距 */
    }

    .icon:hover {
      color: #4998f2;
    }

    .icon:focus {
      color: #4998f2;
    }
  }

  .statisticDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;

    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }

      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }

    .contentBox {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

.equip-data-show-span {
  font-size: 15px;
  font-weight: bold;
}
</style>
